<template>
  <div v-show="$route.name == 'print-show'">
    <div class="invoicMain">
      <div class="invoiceHeader">
        <ul class="headerLeft">
        </ul>
        <div class="headerMiddle">
          <h1 align="center" style="display: inline-block;margin: 0;margin-left: 26%">佛山市慧弈智能设备有限公司</h1>
          <h2 style="display: inline-block;margin: 0;margin-left: 10%">送货单</h2>
          <h4 align="center">地址：佛山市禅城区季华五路万科金融中心C座7楼</h4>
          <h4 align="center">售后服务电话(微信):13823466115</h4>
        </div>
        <ul class="headerRight"></ul>
      </div>
      <div class="invoiceBody">
        <div class="userInfo">
          <ul>
            <h4>客户名称：{{showList.customer}}</h4>
            <h4>客户地址：{{showList.address}}</h4>
          </ul>
        </div>
        <div class="test">
          <h4><label>联系人：</label><span>{{showList.cname}}</span></h4>
          <h4><label>联系方式：</label><span>{{showList.phone}}</span></h4>
        </div>
        <div class="test1">
          <h4>  <label>安装日期：</label><span>{{showList.installtime}}</span></h4>
          <h4>  <label>安装时间：</label><span>{{showList.itime}}</span></h4>
        </div>
        <div>
          <table class="GoodsTable" cellpadding="0" cellspacing="0" style="font-size:16px">
            <tr style="height: 2px">
              <td style="width: 7%">序号</td>
              <td style="width: 24%">产品名称</td>
              <td style="width: 15%">规格</td>
              <td style="width: 5%">单位</td>
              <td style="width: 5%">数量</td>
              <td style="width: 10%">单价</td>
              <td style="width: 10%">折扣</td>
              <td style="width: 12%">金额</td>
              <td style="width: 12%; ">备注</td>
            </tr>
            <tr align="center" style="height:20px;font-size: 16px;" v-for="(item, key) in children">
              <td>{{key + 1}}</td>
              <td>{{item.productn}}</td>
              <td>{{item.model}}</td>
              <td>{{item.unit}}</td>
              <td>{{item.amoumt}}</td>
              <td>{{item.price}}</td>
              <td>{{item.discount}}</td>
              <td>{{item.tprice}}</td>
              <td>{{item.other}}</td>
            </tr>
            <tr class="total" align="center">
              <td >合计</td>
              <td colspan="3">{{changeNumMoneyToChinese(total.tprice)}}</td>
              <td >{{total.amoumt}}</td>
              <td></td>
              <td colspan="3">{{total.tprice}}</td>
            </tr>
          </table>
        </div>
      </div>
      <p style="color: black">
        * 注：以上货品请核对数量，如有质量问题，请在三个工作日内通知本公司,逾期恕不负责
        <br/>* 此订单为展出商品
      </p>
      <ul class="invoicetFooter">
        <li>
          <label>送货单位及经手人(签章)：</label>
        </li>
        <li>
          <label>收货单位及经手人(签章)：</label>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showList: {},
      children: [],
      total: {}
    }
  },
  methods: {
    getShowData() {
      if (this.$route.params.showList) {
        this.showList = this.$route.params.showList
        localStorage.setItem('PrintShow', JSON.stringify(this.$route.params.showList))
      } else {
        this.showList = JSON.parse(localStorage.getItem('PrintShow'))
      }
      this.children = this.showList.children
      this.total = this.showList.total
    },
    changeNumMoneyToChinese(money) {
      var cnNums = new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"); //汉字的数字
      var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
      var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
      var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
      var cnInteger = "整"; //整数金额时后面跟的字符
      var cnIntLast = "元"; //整型完以后的单位
      var maxNum = 999999999999999.9999; //最大处理的数字
      var IntegerNum; //金额整数部分
      var DecimalNum; //金额小数部分
      var ChineseStr = ""; //输出的中文金额字符串
      var parts; //分离金额后用的数组，预定义
      var Symbol = ""; //正负值标记
      if (money == "") {
        return "零元";
      }
      money = parseFloat(money);
      if (money >= maxNum) {
        alert('超出最大处理数字');
        return "";
      }
      if (money == 0) {
        ChineseStr = cnNums[0] + cnIntLast + cnInteger;
        return ChineseStr;
      }
      if (money < 0) {
        money = -money;
        Symbol = "负 ";
      }
      money = money.toString(); //转换为字符串
      if (money.indexOf(".") == -1) {
        IntegerNum = money;
        DecimalNum = '';
      } else {
        parts = money.split(".");
        IntegerNum = parts[0];
        DecimalNum = parts[1].substr(0, 4);
      }
      if (parseInt(IntegerNum, 10) > 0) { //获取整型部分转换
        var zeroCount = 0;
        var IntLen = IntegerNum.length;
        for (var i = 0; i < IntLen; i++) {
          var n = IntegerNum.substr(i, 1);
          var p = IntLen - i - 1;
          var q = p / 4;
          var m = p % 4;
          if (n == "0") {
            zeroCount++;
          } else {
            if (zeroCount > 0) {
              ChineseStr += cnNums[0];
            }
            zeroCount = 0; //归零
            ChineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
          }
          if (m == 0 && zeroCount < 4) {
            ChineseStr += cnIntUnits[q];
          }
        }
        ChineseStr += cnIntLast;
        //整型部分处理完毕
      }
      if (DecimalNum != '') { //小数部分
        var decLen = DecimalNum.length;
        for (var i = 0; i < decLen; i++) {
          var n = DecimalNum.substr(i, 1);
          if (n != '0') {
            ChineseStr += cnNums[Number(n)] + cnDecUnits[i];
          }
        }
      }
      if (ChineseStr == '') {
        ChineseStr += cnNums[0] + cnIntLast + cnInteger;
      } else if (DecimalNum == '') {
        ChineseStr += cnInteger;
      }
      ChineseStr = Symbol + ChineseStr;
      return ChineseStr;
    }
  },
  mounted() {
    this.getShowData()
  }
}
</script>
<style>
ul,
ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

label {
  color: black;
}

.invoicMain {
  width: 920px;
  margin: 0 auto;
  font-size: 14px;
  color: #000;
}

.invoiceHeader {
  height: 126px;
}

.headerLeft li:nth-child(1) {
  text-indent: 1em;
}

.headerLeft li img {
  width: 102px;
  height: 102px;

}

.headerMiddle h1 {
  font-size: 32px;
  color: black;
  font-family: 'kaiti';

}
.headerMiddle  h4{
  font-weight: normal;
  font-size: 16px;
}


.line {
  height: 2px;

}

.headerRight li {
  line-height: 24px;
}

.invoiceBody h4{
  font-weight: normal;
  font-size: 16px;

}

.userInfo {
  width: 48%;
  float: left;
  height: auto;

}
.test{
  margin-left: 2%;
        width: 25%;
        float: left;
        height: auto;

    }
.test1{width: 25%;
  float: right;
  height: auto;

}
.userInfo ul {
  width: 100%;
  margin: 0 2px;
  padding: 0;

}

.userInfo ul li {
  line-height: 24px;
}

.buy {
  width: 20px;
  border-right: 2px solid black;
  padding: 0 10px;
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  color: black;
}

.password {
  width: 20px;
  padding: 0 10px;
  border-right: 2px solid black;
  border-left: 2px solid black;
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  color: black;
}

.pwdInfo {
  flex: 1;
  padding-left: 2px;
}

.goodsInfo {
  height: 210px;
  margin: 0;
  padding: 0;

}

.goodsInfo li {
  display: flex;
  color: black;
  text-align: center;
}

.name {
  width: 260px;
  border-right: 2px solid black;
}

.spec {
  width: 140px;
  border-right:2px solid black;
}

.qty {
  width: 108px;
  border-right: 2px solid black;
}

.unit,
.taxRate {
  width: 62px;
  border-right: 2px solid black;
}

.qty,
.price {
  width: 160px;
  border-right: 2px solid black;
}

.money {
  flex: 1;
  border-right: 2px solid black;
}

.taxAmount {
  flex: 1;
}

.GoodsTable {
  height: 210px;
  width: 100%;
  border-collapse: collapse;
}

.GoodsTable td {
  border: 2px solid black;
  color: black;
}

.GoodsTable tr:nth-child(1),
.GoodsTable tr:nth-last-child(2) {
  height: 24px;
}

.GoodsTable tr:nth-last-child(1) {
  height: 34px;
}

.GoodsTable tr:nth-child(1) td {
  text-align: center;
}

.GoodsTotal {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

.total td:nth-child(1) {
  text-align: center;
}

.invoicetFooter {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.invoicetFooter li {
  width: 50%;
}
</style>